<template>
  <div>
    <my-form-drawer
      :title="title"
      :width="450"
      :visible="visible"
      @ok="edit"
      @cancel="onClose"
    >
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="控制卡品牌" prop="username">
          <a-input v-model="form.username" />
        </a-form-model-item>
        <a-form-model-item label="控制卡型号" prop="realName">
          <a-input v-model="form.realName" />
        </a-form-model-item>
        <a-form-model-item label="分辨率" prop="terFbl">
          <a-row>
            <a-col :span="11">
              <a-form-model-item>
                <a-input-number v-model="form.fblWidth" :formatter="limit" />
              </a-form-model-item>
            </a-col>
            <a-col :span="2" class="text-align">
              <span class="mid">×</span>
            </a-col>
            <a-col :span="11">
              <a-form-model-item>
                <a-input-number v-model="form.fblHeight" :formatter="limit" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import moment from "moment";
import { rule } from "@/utils/validateRules";
import { add, update } from "@/services/user";
import { list } from "@/services/organization";
import MyFormDrawer from "@/components/drawer/MyFormDrawer";
import { limitNumber } from "@/utils/common";

export default {
  name: "ControlForm",
  components: { MyFormDrawer },
  data() {
    return {
      type: "0", //0添加，1编辑
      title: "",
      form: {
        username: "",
        orgId: "",
        realName: "",
        enabled: 1,
        endTime: "",
        gender: "1",
        position: "",
        birthday: "",
        phone: "",
        email: ""
      },
      visible: false,
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "change" },
          { min: 3, message: "账号长度不能小于3位", trigger: "change" },
          { validator: rule.validatorAccountCn, trigger: "change" }
        ],
        // orgId: [{ required: true, message: "所属机构必选", trigger: "blur" }],
        realName: [
          { required: true, message: "姓名不能为空", trigger: "change" },
          { validator: rule.validatorNameCn, trigger: "change" }
        ],
        state: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        // endTime: [
        //   { required: true, message: "有效期不能为空", trigger: "change" },
        // ],
        phone: [{ validator: rule.validatorIsMobile, trigger: "change" }],
        email: [
          { required: false, trigger: "change" },
          { validator: rule.validatorIsEmail, trigger: "change" }
        ]
      },
      enabledArr: [
        { value: 1, label: "正常" },
        { value: 0, label: "锁定" }
      ],
      page: {
        currentPage: 1,
        pageSize: 10
      },
      orgList: []
    };
  },
  computed: {},
  created() {
    this.getOrgList(this.page);

  },

  methods: {
    moment,
    initData() {
      this.form = {
        username: "",
        organId: "",
        realrName: "",
        enabled: 1,
        endTime: "",
        gender: "1",
        position: "",
        birthday: "",
        phone: "",
        email: ""
      };
    },
    onClose() {
      this.visible = false;
      this.$refs["form"].clearValidate();
      this.initData();
    },
    edit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        if (this.type) {
          update(this.form).then(res => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success("修改成功");
              this.onClose();
              this.$emit("getList");
            }
          });
        } else {
          add(this.form).then(res => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success("添加成功");
              this.onClose();
              this.$emit("getList");
            }
          });
        }
      });
    },
    getOrgList(page, params) {
      list(
        Object.assign(
          {
            page: page.currentPage,
            pageSize: page.pageSize
          },
          params
        )
      ).then(res => {
        if (res.data.code == 0) {
          console.log(res.data.data.list);
          this.orgList = res.data.data.list;
        }
      });
    },
    changeForm(state, action, data) {
      this.visible = state;
      this.type = action;
      this.title = this.type ? "编辑控制卡" : "新增控制卡";
      if (this.type) {
        this.form = Object.assign(this.form,data);
      }
    },
    limit(value) {
      return limitNumber(value);
    },
  }
};
</script>

<style lang="less" scoped></style>
